<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">预定服务单详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>订单服务单号：</span>
            <div class="right">
              <span>{{detail.institutionOrderNo || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>下单时间：</span>
            <div class="right">
              <span>{{detail.institutionOrderAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品名称：</span>
            <div class="right">
              <span>{{detail.serviceProductName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>服务地区：</span>
            <div class="right">
              <span>{{detail.institutionProvinceCity || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品类型：</span>
            <div class="right">
              <span>{{detail.orderCatalog || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>结算价格：</span>
            <div class="right">
              <span>{{detail.price || '--'}}元/次</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">服务单信息</div>
          <div class="list">
            <span>服务单状态：</span>
            <div class="right">
              <span>{{detail.institutionOrderStatus || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>服务单总次数：</span>
            <div class="right">
              <span>{{detail.institutionOrderAmount || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>已使用次数：</span>
            <div class="right">
              <span>{{detail.institutionOrderUseAmount || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>开始时间：</span>
            <div class="right">
              <span>{{detail.institutionOrderValidBeginAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>结束时间：</span>
            <div class="right">
              <span>{{detail.institutionOrderValidEndAt || '--'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            受益人信息
          </div>
          <div class="list">
            <span>客户昵称：</span>
            <div class="right">
              <span>{{detail.wrong1 || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>注册手机号：</span>
            <div class="right">
              <span>{{detail.wrong2  || '--'}}【{{detail.wrong3  || '--'}}】</span>
            </div>
          </div>
          <div class="list">
            <span>收货信息：</span>
            <div class="right">
              <span>{{detail.wrong4  || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">产品清单</div>
          <div class="list">
            <div class="right">
              {{detail.serviceProductList  || '--'}}
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">服务说明</div>
          <div class="list">
            <div class="right">{{detail.serviceProductDesc  || '--'}}</div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            已完成订单信息
          </div>
          <div class="jx-table" style="padding: 0;">
            <el-table :data="detail.orders" border :span-method="objectSpanMethod" style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="serviceProductOrderNo" label="订单号" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="serviceProductOrderAt" label="订单时间" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopName" label="所属店铺" width="130" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopLocation" label="消费地点" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img class="icon" src="/static/img/u178.png"/>
                  {{scope.row.shopLocation}}
                </template>
              </el-table-column>
              <el-table-column prop="serviceProductName" label="产品名称" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="serviceProductOrderAmount" label="数量" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="serviceProductOrderPrice" label="结算价格" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="serviceProductOrderSum" label="结算金额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="isClose" label="是否结算" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{scope.row.isClose ? '是' : '否'}}
                </template>
              </el-table-column>
              <el-table-column prop="serviceProductOrderStatus" label="订单状态" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.order.supplier.detail,
        boo: {
          loading: false,
        },
        detail: '',
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getList(){
        let _self = this
        let params = {
          id: this.$route.query.id
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.detail = res.retObject
            _self.getSpanArr(_self.detail.orders)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(`${_self.https}${_self.$route.query.id}`, {}, success) 
      },
      getSpanArr (data) {
        this.spanArr = []
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            this.spanArr.push(1)
            this.pos = 0
          } else {
            if (data[i].serviceProductOrderNo === data[i - 1].serviceProductOrderNo) {
              // 如果useName相等就累加，并且push 0
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            }else {
              // 不相等push 1
              this.spanArr.push(1)
              this.pos = i
            }
          }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
    },
	}

</script>
<style scoped lang="sass">
  .jx-table .el-table .cell
    .icon
      width: 18px
      height: 20px
      position: relative
      top: 2px
</style>
